<!doctype html>
<html>
	<head>
		<title>Simple Ocrad.js Example</title>
		<style>
			body {
				background: whiteSmoke;
				font-family: sans-serif;
				margin: 30px;
			}
			#transcription, #pic {
				background: white;
				display: inline-block;
				border: 1px solid #ddd;
				margin: 10px;
			}
			#transcription {
				font-size: 30px;
				padding: 30px;
				min-width: 300px;
				color: gray;
			}
			#transcription.done {
				color: black;
			}
			#main {
				display: flex;
			}
		</style>
	</head>
	<body>
		<h1>Simple Ocrad.js Example</h1>

		<script src="../../ocrad.js"></script>
		<script>
			function recognize_image(){
				document.getElementById('transcription').innerText = "(Recognizing...)"

				OCRAD(document.getElementById("pic"), function(text){
					document.getElementById('transcription').className = "done"
					document.getElementById('transcription').innerText = text;
				})
			}
		</script>

		<div id="main">
			<img id="pic" src="img/message.png" onload="recognize_image()">
			<div id="transcription"></div>
		</div>
	</body>	
</html>


